import React, {Component} from "react";
import {Card, Icon, List} from 'antd';
import LinkButton from "../../components/link-button";
import {BASE_IMG_URL} from "../../utils/constant";
import {reqCategory} from "../../api";

const Item = List.Item;

export default class ProductDetail extends Component {
    state = {
        cName1: '',//一级分类,
        cName2: ''//二级分类
    };

    async componentDidMount() {
        const {categoryId, pCategoryId} = this.props.location.state.product;
        if (pCategoryId === '0') {
            const result = await reqCategory(categoryId);
            const cName1 = result.data.name;
            this.setState({cName1});
        } else {
            // 效率低，后面的请求总是等待前面的请求成功返回
            // const result1 = await reqCategory(pCategoryId);
            // const result2 = await reqCategory(categoryId);
            // const cName1 = result1.data.name;
            // const cName2 = result2.data.name;
            // this.setState({cName1, cName2});
            const results = await Promise.all([reqCategory(categoryId),reqCategory(pCategoryId)]);
            const cName1 = results[1].data.name;
            const cName2 = results[0].data.name;
            this.setState({cName1, cName2});
        }
    }

    render() {
        const {name,price,desc,detail,imgs} = this.props.location.state.product;
        const {cName1, cName2} = this.state;
        const title = (
            <span>
                <LinkButton>
                    <Icon type='arrow-left' style={{ marginRight:10, fontSize:20}} onClick={()=>this.props.history.goBack()}/>
                </LinkButton>

                <span>商品详情</span>
            </span>
        );
        return (
            <Card title={title} className='product-detail'>
                <List>
                    <Item className='product-item'>
                        <span className="left">商品名称：</span>
                        <span>{name}</span>
                    </Item>
                    <Item className='product-item'>
                        <span className="left">商品描述：</span>
                        <span>{desc}</span>
                    </Item>
                    <Item className='product-item'>
                        <span className="left">商品价格：</span>
                        <span>{price}</span>
                    </Item>
                    <Item className='product-item'>
                        <span className="left">所属分类：</span>
                        <span>{cName1} {cName2 ? '--->'+cName2 : ''}</span>
                    </Item>
                    <Item className='product-item'>
                        <span className="left">商品图片：</span>
                        <span>
                            {
                                imgs.map(img => (<img className='product-img' src={BASE_IMG_URL + img} alt='img' key={img}/>))
                            }
                        </span>
                    </Item>
                    <Item className='product-item'>
                        <span className="left">商品详情：</span>
                        <span dangerouslySetInnerHTML={{__html: detail}}/>
                    </Item>
                </List>
            </Card>
        );
    }
}